<template>
    <div class="left-nav">
        <ul>
            <li>
                <i class="iconfont icon-dingdan"></i>
                <div>{{buttons.order}}</div>
            </li>
            <li>
                <i class="iconfont icon-home"></i>
                <div>{{buttons.home}}</div>
            </li>
            <li>
                <i class="iconfont icon-dianpu"></i>
                <div>{{buttons.store}}</div>
            </li>
            <li>
                <i class="iconfont icon-goumai"></i>
                <div>{{buttons.buy}}</div>
            </li>
            <li>
                <i class="iconfont icon-huiyuanqia"></i>
                <div>{{buttons.member}}</div>
            </li>
            <li>
                <i class="iconfont icon-shezhi"></i>
                <div>{{buttons.setting}}</div>
            </li>
        </ul>
    </div>    
</template>
<script>
export default{
    name:"",
    data(){
        return {
            //按钮名字
            buttons:{
                home:'主页',
                setting:'设置',
                buy:'结账',
                store:'店铺',
                order:'订单',
                member:'会员'
            }
        }
    }
}
</script>
<style>
/* 不需要scope,全局有效 */
.left-nav{
    color:rgb(234, 234, 243);
    font-size: 24px;
    width: 5%;
    float:left;
    height: 100%;
    background-color: rgb(105, 91, 228);
}
.left-nav .iconfont{
    font-size: 48px;
}
.left-nav ul{
    padding: 0px;
    margin: 0px;
}
.left-nav li{
    list-style: none;
    text-align: center;
    border-bottom: 1px solid #000;
    padding: 10px;
}
</style>
